
$(function(){
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });

    //页面打开加载数据
    $.ajax({
        type:"get",
        url:"/category/queryTopCategory",
        success:function(res){
            // console.log(res);//如果是对象说明我们一会使用模板引擎可以直接使用不需要包装
            // console.log(res.rows);

            //使用``号循环遍历数据
            // var str = "";;
            // $.each(res.rows,function(index,val){
            //     str+=`<a href="#">${val.categoryName}</a>`;
            // });
            // $(".links").append(str);

            //使用模板引擎渲染数据
            var html = template('catagory-list',res);
            $(".links").html(html);

            //获取第一个一级分类的id 然后根据它的id来获取它的二级分类的内容
            var id = $(".links").children("a").eq(0).attr("data-id");
            // console.log(id);
            //然后根据它的id来获取它的二级分类的内容
            getCatagoryProduct(id);
            $(".links").children("a").eq(0).addClass('active').siblings().removeClass('active');
            
        }
    });
    //点击切换左侧,更换数据
    $(".links").on("click","a",function(){
        $(this).addClass("active").siblings().removeClass("active");

        //获取点击左侧分类的id
        var id = $(this).attr("data-id");

        //获取右边的数据  二级分类
        getCatagoryProduct(id);
    });
    //封装获取二级分类的ajax请求
    function getCatagoryProduct(id){
        $.ajax({
            type:"get",
            url:"/category/querySecondCategory",
            data:{
                "id":id
            },
            dataType:"json",
            success:function(res){ 
                // console.log(res.rows.length);
                //判断是不是数据为空
                if(res.rows.length == 0){
                    $(".brand-list").text("暂无数据");
                }else{
                    //循环遍历在右侧展示
                    // var str = "";
                    // $.each(res.rows,function(index,val){
                    //     str+=`<li>
                    //                 <a href="#">
                    //                     <img src="${val.brandLogo}" alt="">
                    //                     <p>${val.brandName}</p>
                    //                 </a>
                    //         </li>`;
                    // });
                    // $(".brand-list").html(str);
                    var html = template("catagory-product",res);
                    $('.brand-list').html(html);
                }
                
            }

        });
    }
})